<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>

  <!-- width 视口宽度
  height 视口高度 
  initial-scale 初始化的缩放倍数
  initial-scale = 1 没有放大 也没有缩小 1：1 等比例缩放
  minimum-scale	允许用户缩放到的最小比例
  maximum-scale	允许用户缩放到的最大比例
  user-scalable	用户是否可以手动缩放

  只需要
    width=device-width 视口宽度
    initial-scale=1 -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <style>
    .demo{
      width:1900px;
      height:500px;
      background:red;
      font-size:40px;
    }

    @media screen and (max-width:1000px){
      .demo{
        background:green;
      }
    }

    /* 当前屏幕 <= 450px */
    /* 媒体查询没生效 */
    @media screen and (max-width:450px){
      .demo{
        background:blue;
      }
    }
  </style>
</head>
<body>
  <div class="demo">
    HELLO WORLD sadfasd
     sdfsdfsd 水电费水电费水电费
  </div>
</body>
</html>